import React, {useEffect, useRef} from 'react'
import {ECharts, init} from 'echarts';
import {options} from './config';


const Home = () => {
    const divRef = useRef<HTMLDivElement>(null);
    // const chartRef = useRef<ECharts>();
    useEffect(() => {
        const myChart = init(divRef.current);
        myChart.setOption({
            // ...其他配置项
            ...options,
            contextMenu: {
                show: true,
                itemWidth: 14,
                itemHeight: 14,
                formatter: function (params) {
                    console.log(123)
                    // 根据参数判断用户点击了哪个图表元素
                    if (params.componentType === 'series') {
                        // 生成柱状图菜单项
                        return [
                            {
                                name: '数据视图',
                                onclick: function () {
                                    console.log('查看数据');
                                },
                            },
                            {
                                name: '编辑',
                                onclick: function () {
                                    console.log('编辑图表');
                                },
                            },
                        ];
                    } else if (params.componentType === 'dataZoom') {
                        // 生成数据区域缩放菜单项
                        return [
                            {
                                name: '放大',
                                onclick: function () {
                                    myChart.dispatchAction({
                                        type: 'dataZoom',
                                        seriesIndex: params.dataIndex,
                                        startValue: 0,
                                        endValue: 100
                                    });
                                },
                            },
                            {
                                name: '缩小',
                                onclick: function () {
                                    myChart.dispatchAction({
                                        type: 'dataZoom',
                                        seriesIndex: params.dataIndex,
                                        startValue: 0,
                                        endValue: 100
                                    });
                                },
                            },
                        ];
                    } else {
                        // 其他类型的图表元素，不显示菜单
                        return null;
                    }
                },
            },
        });

// 使用图表配置项渲染图表
        myChart.setOption(option);
    }, []);
    return <div ref={divRef} style={{width: '600px', height: '400px'}}>Home</div>
}

export default Home;

//
// // 初始化 ECharts 实例
// const myChart = echarts.init(document.getElementById('main'));
//
// // 设置图表配置项
// const option = {
//     // ...其他配置项
// };
//
// // 设置右键菜单
// myChart.setOption({
//     // ...其他配置项
//     contextMenu: {
//         show: true,
//         itemWidth: 14,
//         itemHeight: 14,
//         formatter: function (params) {
//             // 根据参数判断用户点击了哪个图表元素
//             if (params.componentType === 'series') {
//                 // 生成柱状图菜单项
//                 return [
//                     {
//                         name: '数据视图',
//                         onclick: function () {
//                             console.log('查看数据');
//                         },
//                     },
//                     {
//                         name: '编辑',
//                         onclick: function () {
//                             console.log('编辑图表');
//                         },
//                     },
//                 ];
//             } else if (params.componentType === 'dataZoom') {
//                 // 生成数据区域缩放菜单项
//                 return [
//                     {
//                         name: '放大',
//                         onclick: function () {
//                             myChart.dispatchAction({
//                                 type: 'dataZoom',
//                                 seriesIndex: params.dataIndex,
//                                 startValue: 0,
//                                 endValue: 100
//                             });
//                         },
//                     },
//                     {
//                         name: '缩小',
//                         onclick: function () {
//                             myChart.dispatchAction({
//                                 type: 'dataZoom',
//                                 seriesIndex: params.dataIndex,
//                                 startValue: 0,
//                                 endValue: 100
//                             });
//                         },
//                     },
//                 ];
//             } else {
//                 // 其他类型的图表元素，不显示菜单
//                 return null;
//             }
//         },
//     },
// });
//
// // 使用图表配置项渲染图表
// myChart.setOption(option);
